<template>
  <div>
    <el-dialog
      :title="titles"
      :visible.sync="dialogVisible"
      width="36%"
      :close-on-click-modal="true"
      :close-on-press-escape="true"
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm foems">
 
            <el-form-item class="sel" label="站点ID" prop="site_id">
                     <el-select v-model="ruleForm.site_id" placeholder="请选择站点ID">
                          <el-option
               v-for="item in stationLists"
                :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>

                </el-select>
            </el-form-item>
  <el-form-item label="任务名称" prop="task_title">
    <el-input v-model="ruleForm.task_title"></el-input>
  </el-form-item>
  <el-form-item label="任务级别" prop="task_level">
    <el-input v-model="ruleForm.task_level" placeholder="请输入：一般，紧急等"></el-input>
  </el-form-item>
  <el-form-item label="开始时间" required>
      <el-form-item prop="task_start">
        <el-date-picker  type="datetime" placeholder="选择日期" v-model="ruleForm.task_start" ></el-date-picker>
      </el-form-item>
  </el-form-item>
    <el-form-item label="结束时间" required>
      <el-form-item prop="task_end">
        <el-date-picker  type="datetime" placeholder="选择日期" v-model="ruleForm.task_end"></el-date-picker>
      </el-form-item>
  </el-form-item>
  <el-form-item label="任务内容" prop="task_content">
    <el-input type="textarea" v-model="ruleForm.task_content"></el-input>
  </el-form-item>
    <!-- <el-form-item label="报修类型" prop="task_type">
    <el-radio-group v-model="ruleForm.task_type">
      <el-radio  label="1">巡检</el-radio>
  <el-radio label="2">试验</el-radio>
   <el-radio label="3">报修</el-radio>
  <el-radio label="4">抢修</el-radio>
    </el-radio-group>
  </el-form-item> -->
 
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
    <el-button @click="close">取消</el-button>
  </el-form-item>
</el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addList,updatePlan } from '@/api/repair'
import {  allStation } from '@/api/maintain'



export default {
  name: 'detail',
   props:['titles','details'],
  data() {
    return {
      show: false,
        ruleForm: {
          task_title: '',
          site_id: '',
          task_start: '',
          task_end: '',
          task_level:'',
          task_content: '',
          task_type: '4',
          task_status:'0',
        },
        rules: {
          task_title: [
            { required: true, message: '请输入任务名称', trigger: 'blur' },
            
          ],
          task_level:[
            { required: true, message: '请输入任务级别', trigger: 'blur' },

          ],
          site_id: [
            { required: true, message: '请选择站点ID', trigger: 'change' }
          ],
          task_start: [
            {required: true, message: '请选择开始时间', trigger: 'change' }
          ],
          task_end: [
            {  required: true, message: '请选择结束时间', trigger: 'change' }
          ],
          task_content: [
              { required: true, message: '请填写任务内容', trigger: 'blur' }
          ],

          
        },
        stationLists:[],
        dialogVisible:false,

    }
  },
  watch:{
    details(oldV,newV){
      if(this.details.id){
        this.ruleForm=this.details
      }else{
        this.ruleForm={
        plan_type: 2,
        site_id:'',
        plan_title:'',
        plan_content:'',
        plan_cycle:'',
        plan_start:'',
        plan_end:''
      }
      }
      console.log('接收的titl11',this.ruleForm)
    }
  },
  created() {
   this.getStation()
  },
  methods: {
      // 打开弹窗
    open(row) {
      // 修改打开弹窗的变量为true，就可以打开弹窗了
      this.dialogVisible = true;
    },
     // 关闭弹窗的方法
    close() {
      // 关闭弹窗的变量为false，就可以关闭弹窗了
      this.dialogVisible = false;
      // this.$emit('close')
    },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
             if(this.titles=='新增'){
             this.adds()
          }else{
              this.updatePlans()
          }
           this.close()
            this.dialogVisible = false
          } else {
            console.log('error submit!!');
            return false;
          }
        });
       
        console.log('dialogVisible',this.dialogVisible)

      },
      close(){
         this.$emit('close')
      },
      // 添加报修任务
      adds(){
        let time1=this.ruleForm.task_start
        let time2=this.ruleForm.task_end
        this.ruleForm.task_start=this.dateFormat(time1)
        this.ruleForm.task_end=this.dateFormat(time2)
        addList(this.ruleForm).then(res=>{
          if(res.code==200){
             this.$message({
              message: '新增成功',
              type: 'success'
            })
          // this.$emit('close')
          this.$emit('refreshList')
          }
        
        })
      },
        // 编辑报修任务
      updatePlans(){
       this.ruleForm=this.details
        let time1=this.ruleForm.task_start
        let time2=this.ruleForm.task_end
        this.ruleForm.task_start=this.dateFormat(time1)
        this.ruleForm.task_end=this.dateFormat(time2)
        updatePlan(this.ruleForm).then(res=>{
          if(res.code==200){
             this.$message({
              message: '编辑成功',
              type: 'success'
            })
          // this.$emit('close')
          this.$emit('refreshList')
          }
        
        })
      },
     //   获取所有站点
      getStation(){
        allStation().then(res=>{
            this.stationLists=res.data.data
        })
      },
      dateFormat(row) {
      var t = new Date(row)// row 表示一行数据, createTime 表示要格式化的字段名称
      if(!t){
        return ''
      }
      let year = t.getFullYear()
      let month = this.dateIfAddZero(t.getMonth()+1)
      let day = this.dateIfAddZero(t.getDate())
       let hours = this.dateIfAddZero(t.getHours())
      let minutes = this.dateIfAddZero(t.getMinutes())
      let seconds = this.dateIfAddZero(t.getSeconds())
      return year + '-' + month + '-' + day+ ' ' + hours + ':' + minutes+ ':' + seconds
    },
    dateIfAddZero(time) {
      return time < 10 ? '0'+ time : time
    }



  }
}
</script>

<style lang="scss" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border-radius: 10px;
    border: 1px dashed #cccccc;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    border-radius: 10px;
  }
  .foems{
      ::v-deep.el-input{
          width: 60%;
      }
       .sel{
            ::v-deep.el-input{
                 width: 100%;
            }
       }
     ::v-deep .el-textarea__inner{
          width: 60%;
     }
  }
  ::v-deep.el-dialog{
    width: 30%!important;
  }
  
</style>
